<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form class="InsColumnRxLayout" :form="form" style="overflow: hidden;">
                    <a-form-item style="display:none">
                        <a-input v-decorator="['colId']"/>
                    </a-form-item>
                    <a-row style="margin-top: 10px">
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','栏目名')">
                                <rx-input-i18n
                                    style="width: 80%"
                                    :placeholder="i18n('form.name','栏目名')"
                                    v-decorator="['name', {rules: [{required: true, message: i18n('form.name','栏目名','input')}]}]"
                                ></rx-input-i18n>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.key', '栏目别名')">
                                <a-input style="width: 80%" :placeholder="i18n('form.key', '栏目别名')"
                                         v-decorator="['key', {rules: [
                                             {required: true, message: i18n('form.key','栏目别名','input')},
                                             {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                                         ]}]"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.type', '类型')" class="itmStar">
                                <a-select id="tempType" v-model="mdl.type" style="width: 80%" @change="defChangeType">
                                    <a-select-option v-for="item in tempTypeList" :key="item.id" :value="item.id">
                                        {{ item.name }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.icon', '图标')" >
                                <rx-input-icon  style="width: 80%" v-model="mdl.icon" @change="iconselect"></rx-input-icon>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <component
                                ref="compomentsValid"
                                :dataObj="dataObj"
                                :tempTypeId="tempTypeId"
                                :is="currentComponet">
                            </component>

                        </a-col>
                    </a-row>
                    <a-row v-if="isNotVue">
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="{ span:19}" :label="i18n('form.formwork', '模板')" class="lastgroup">
                                <div class="insColumnAformItem">
                                    <rx-monaco-editor
                                        ref="monacoes"
                                        :language="monacoeLanguage"
                                        v-model="mdl.templet"
                                        style="height:600px;"
                                        v-decorator="['templet', {rules: [{required: true, message: i18n('form.formwork', '模板','write')}]}]"
                                    >
                                    </rx-monaco-editor>
                                </div>

                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
                <iconSelector-modal ref="modal" @ok="setIcon" :icon="icon"/>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import InsColumnDefApi from '@/api/portal/core/insColumnDef';
import InsColumnTempApi from '@/api/portal/core/insColumnTemp';
import {BaseForm, RxDialog, RxCheckbox, RxMonacoEditor} from "@lowcode/jpaas-common-lib";


import InsColumnDefCalendar from '@/views/modules/portal/core/defComponents/InsColumnDefCalendar';
import InsColumnDefList from '@/views/modules/portal/core/defComponents/InsColumnDefList';
import InsColumnDefMessageBel from '@/views/modules/portal/core/defComponents/InsColumnDefMessageBel';
import InsColumnDefNewsBel from '@/views/modules/portal/core/defComponents/InsColumnDefNewsBel';
import InsColumnDefTabBel from '@/views/modules/portal/core/defComponents/InsColumnDefTabBel';
import InsColumnDefVueBel from "@/views/modules/portal/core/defComponents/InsColumnDefVueBel";
import InsColumnDefDefault from '@/views/modules/portal/core/defComponents/InsColumnDefDefault';
import IconSelectorModal from "@/views/modules/system/core/IconSelectorModal"
import rxInputIcon from "@/components/rxComponent/rx-input-icon";

var dataObj = {
    dataUrl: "",
    function: "",
    newType: "",
    tabgroups: "",
    listCount: 6,
    newDIc: "",
    funcType: "",
    sqlName: "",
    service: "",
    calendarMode: ""
};

export default {
    name: 'InsColumnDefEdit',
    mixins: [BaseForm],
    components: {
        RxDialog, InsColumnDefList, InsColumnDefMessageBel, InsColumnDefCalendar,
        InsColumnDefNewsBel, InsColumnDefTabBel, InsColumnDefVueBel, InsColumnDefDefault, InsColumnTempApi,
        'rx-checkbox': RxCheckbox, RxMonacoEditor,IconSelectorModal,rxInputIcon
    },
    data() {
        return {
            isNotVue: true,
            dataObj: dataObj,
            monacoeLanguage: "html",
            currentComponet: InsColumnDefDefault,
            tempTypeList: [],
            tempTypeId: "",
            typeButtonName: this.i18n('form.selColumnType','请选择栏目类型'),
            templet: "",
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 18
            },
            labelCol2: {
                span: 5
            },
            wrapperCol2: {
                span: 19
            },
            icon:''
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"insColumnDef",key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        onload_(data) {
            this.getTemList();
        },
        crealAllDataObj() {
            this.dataObj = dataObj;
        },
        initDataObj() {
            if (this.mdl.setTing) {
                this.dataObj = JSON.parse(this.mdl.setTing);
            } else {
                this.dataObj = dataObj;
            }
        },

        getTempHtml() {
            var _this = this;
            InsColumnTempApi.get(this.tempTypeId).then(result => {
                if (result && result.data) {
                    _this.$set(_this.mdl, "templet", result.data.templet);
                }
            });
        },
        getTemList() {
            var _this = this;
            var parameter = {
                pageNum: "",
                pageSize: "",
                params: {}
            };
            InsColumnTempApi.getColumnTempList().then(result => {
                _this.tempTypeList = result;
                this.initDataObj();
                if (_this.mdl.type) {
                    this.setCurrentComponet(_this.mdl.type);
                }
            });
        },
        setCurrentComponet(value) {
            var tempObj = this.getTempObj(value);
            if (tempObj.key == 'vue') {
                this.isNotVue = false;
            } else {
                this.isNotVue = true;
            }
            this.currentComponet = "InsColumnDef" + tempObj.tempType;
        },
        defChangeType(value) {
            if (value == this.tempTypeId) {
                return;
            }
            this.crealAllDataObj();

            var tempObj = this.getTempObj(value);
            this.currentComponet = "InsColumnDef" + tempObj.tempType;
            this.typeButtonName = tempObj.name;
            this.tempTypeId = tempObj.id;
            if (tempObj.key == 'vue') {
                this.isNotVue = false;
            } else {
                this.isNotVue = true;
                this.getTempHtml();
            }
        },
        getTempObj(tempId) {
            for (var i = 0; i < this.tempTypeList.length; i++) {
                var tempObj = this.tempTypeList[i];
                if (tempId == tempObj.id) {
                    return tempObj;
                }
            }
        },
        get(id) {
            return InsColumnDefApi.get(id);
        },
        save(values) {
            values = this.setDefault(values);
            values.setTing = JSON.stringify(this.dataObj);
            values.type = this.mdl.type;
            values.icon = this.mdl.icon;
            return InsColumnDefApi.save(values);
        },
        setDefault(values) {
            //新增时保存应用ID
            let appId=this.curApp.appId;
            if(appId && !this.pkId){
                values.appId=appId;
            }
            if (!values.isDefault) {
                values.isDefault = "0";
            }
            if (!values.isPublic) {
                values.isPublic = "0";
            }
            if (!values.isMobile) {
                values.isMobile = "0";
            }
            return values;
        },
        validForm() {
            return this.$refs.compomentsValid.valid();
        },
        iconselect(icon){
            if(!icon){
                this.mdl.icon = '';
            }else{
                this.mdl.icon = icon ;
            }
        },
        emitEmpty() {
            this.$refs.iconInput.focus();
            this.mdl.icon = "";
        },
        setIcon (icon) {
            this.mdl.icon = icon.icon;
        }
    }
}
</script>
<style>
.InsColumnRxLayout{
   padding:0px 10px!important;
}
.insColumnAformItem{
    height:100%;
    box-sizing: border-box;
    width: 100%;
    padding-right: 1px
}
.lastgroup {
    margin-bottom: 0 !important;
}

.lastgroup .ant-row.ant-form-item .ant-form-item-control-wrapper {
    flex: none;
}

.itmStar label:before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
}
</style>
